import React, { useEffect, useState } from 'react'

import './index.scss'

export default function PlanMeasureCont1({data, setListParam}) {

  const template = [
    {id: 1, name: '应急减排清单参与企业', counts: 0, key: 'emergency_all_participants', planId: false, control_type: false},
    {id: 2, name: '应急减排清单差异化减排企业', counts: 0, key: 'emergency_differentiation_enterprises', planId: false, control_type: false},
    {id: 3, name: '应急减排清单自主减排企业', counts: 0, key: 'emergency_autonomous_enterprises', planId: false, control_type: false},
    {id: 4, name: '参与所选预案的企业', counts: 0, key: 'plan_companies', planId: true, control_type: false},
    {id: 5, name: '应对所选预案差异化减排企业', counts: 0, key: 'plan__differentiation_companies', planId: true, control_type: 1},
    {id: 6, name: '应对所选预案自主减排企业', counts: 0, key: 'plan_autonomous_enterprises', planId: true, control_type: 5},
  ]
  const [lists, setLists] = useState([])

  useEffect(() => {
    if(!data) { setLists(template); return; }
    setLists(template.map(item => {
      item['counts'] = data[item['key']] || 0
      return item
    }))
  }, [data])

  return <div className='plan-measure-content-1'>
    {
      lists.map(item => {
        return <div key={item.id}>
          <i>{item.name}：</i>
          <i onClick={() => {setListParam({ 
            plan_id: item.planId,
            control_type: item.control_type
          })}}>{item.counts}家</i>
        </div>
      })
    }
  </div>
}
